<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <!-- 引入vue的js文件，放在文件的头部 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>


    <div id="root">

        <h2>值是：{{n}}</h2>
        <button @click="add">点我+1</button>

        <!-- 参考地址：https://v2.cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA -->
        <!-- 里面的生命周期图例 -->

    </div>


</body>
<script type="text/javascript">

    const vm = new Vue({
        el: "#root",
        data: {
            n: 1,
        },
        methods: {
            add() {
                this.n++
            }
        },
        // 初始化阶段中，数据代理还未开始
        // 无法 通过vm访问data中的数据，methods的方法
        beforeCreate() {
            console.log('beforeCreate...');
            console.log(this.n);
            debugger
        },

        // 初始化阶段中，数据监测，数据代理
        // 可以 通过vm访问data中的数据，methods的方法
        created() {
            console.log('created...');
            console.log(this.n);
            debugger
        },

        // 页面呈现 未经 Vue编译的DOM结构时候
        beforeMount() {
            console.log('beforeMount...');
            console.log(this.n);
            debugger
        },

        // 页面呈现 经过 Vue编译的DOM 
        // 真实DOM插入页面时候，初始化操作
        mounted() {
            console.log('mounted...');
            console.log(this.n);
            debugger
        },

        // 数据是新的，但页面是旧的时候，更新数据之前
        beforeUpdate() {
            console.log('beforeUpdate...');
            console.log(this.n);
            debugger
        },

        // 数据是新的，页面也是新的时候，数据保持同步时候
        updated() {
            console.log('updated...');
            console.log(this.n);
            debugger
        },

        // 所以的数据、方法、指令等等，处于可用状态，马上执行销毁时候
        // 此阶段：关闭定时器、取消订阅、解绑自定义事件等等收尾工作
        // 销毁之前时候
        beforeDestroy() {
            console.log('beforeDestroy...');
            console.log(this.n);
            debugger
        },

        // 最后一步，销毁，此方法基本很少用
        destroyed() {
            console.log('destroyed...');
            console.log(this.n);
            debugger
        },
    })
</script>

</html>